<template>
  <div v-loading="loading">
    <div class="white-card">
      <div class="page-title">投诉举报信息填报</div>
      <div class="explain">
        <p class="tit">投诉举报填写说明：</p>
        <div class="cont">
          <p>
            一、投诉举报书，主要包括投诉举报人和投诉举报对象的单位名称、联系方式、主要诉求以及事实与理由。请点击&nbsp;
            <span class="moban" @click="onDownloadFile()">投诉举报书模板</span>
            &nbsp;下载查看。
          </p>
          <p>二、与投诉举报事项相关的资料，包括书面材料、照片、录音、录像等。</p>
          <p>三、委托他人代理投诉举报的，应当提供投诉举报人出具的授权委托书及受托人身份证明等相关材料。</p>
          <p>四、如投诉举报人需要相关补正事项的，应按期提交补正，如无正当理由逾期不补正的，则视为放弃投诉举报。</p>
          <p>五、投诉举报人反映情况、提供材料要客观真实准确。</p>
        </div>
      </div>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="160px" label-suffix="：">
      <div class="white-card">
        <moduleHead title="投诉举报人基本信息"></moduleHead>
        <template v-if="cmsUserInfo.userType === 1">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系人" prop="createUsername">
                <el-input v-model="form.createUsername" placeholder="请填写联系人" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idNumber" label-width="190px">
                <el-input v-model="form.idNumber" placeholder="请填写身份证号" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="手机号码" prop="mobile" class="input-btn">
                <el-input v-model="form.mobile" placeholder="请填写手机号码" maxlength="11"></el-input>
                <el-button @click="sendCode(form.mobile)" type="primary" plain class="send-sms">发送验证码</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="验证码" prop="mobileCode" label-width="190px">
                <el-input v-model="form.mobileCode" placeholder="请填写验证码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系邮箱" prop="email" class="input-btn">
                <el-input v-model="form.email" placeholder="请填写联系邮箱"></el-input>
                <el-button @click="sendEmail(form.email)" type="primary" plain class="send-sms">发送验证码</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="验证码" prop="emailCode" label-width="190px">
                <el-input v-model="form.emailCode" placeholder="请填写验证码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="通讯地址" prop="companyAddress">
                <el-input v-model="form.companyAddress" placeholder="请填写通讯地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属行业" prop="industryType" label-width="190px">
                <el-select v-model="form.industryType">
                  <el-option v-for="item in industryTypeDictList" :key="item.id" :label="item.name" :value="item.name">{{ item.name }}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <div>
              <span class="color-danger text-bold">注：</span>
              请确认填写信息准确无误。您所填写地址、邮箱、手机号视为案件办理期间的有效送达联系方式。相关文书、材料、信息等到达您提供的送达方式，即视为已送达。
            </div>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="企业名称" prop="">
                <el-input v-model="form.companyName" placeholder="请填写受委托企业名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="统一社会信用代码" prop="" label-width="190px">
                <el-input v-model="form.socialCreditNumber" placeholder="请填写受委托企业编码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template v-if="cmsUserInfo.userType === 2">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="企业名称" prop="companyName">
                <el-input v-model="form.companyName" placeholder="请填写企业名称" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="统一社会信用代码" prop="socialCreditNumber" label-width="190px">
                <el-input v-model="form.socialCreditNumber" placeholder="请填写受委托企业编码" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系人" prop="createUsername">
                <el-input v-model="form.createUsername" placeholder="请填写联系人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idNumber" label-width="190px">
                <el-input v-model="form.idNumber" placeholder="请填写身份证号" maxlength="18"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="手机号码" prop="mobile" class="input-btn">
                <el-input v-model="form.mobile" placeholder="请填写手机号码" maxlength="11"></el-input>
                <el-button @click="sendCode(form.mobile)" type="primary" plain class="send-sms">发送验证码</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="验证码" prop="mobileCode" label-width="190px">
                <el-input v-model="form.mobileCode" placeholder="请填写验证码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系邮箱" prop="email" class="input-btn">
                <el-input v-model="form.email" placeholder="请填写联系邮箱"></el-input>
                <el-button @click="sendEmail(form.email)" type="primary" plain class="send-sms">发送验证码</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="验证码" prop="emailCode" label-width="190px">
                <el-input v-model="form.emailCode" placeholder="请填写验证码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item label="通讯地址" prop="companyAddress">
            <el-input v-model="form.companyAddress" placeholder="请填写通讯地址"></el-input>
            <div>
              <span class="color-danger text-bold">注：</span>
              请确认填写信息准确无误。您所填写地址、邮箱、手机号视为案件办理期间的有效送达联系方式。相关文书、材料、信息等到达您提供的送达方式，即视为已送达。
            </div>
          </el-form-item> -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="通讯地址" prop="companyAddress">
                <el-input v-model="form.companyAddress" placeholder="请填写通讯地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属行业" prop="industryType" label-width="190px">
                <el-select v-model="form.industryType">
                  <el-option v-for="item in industryTypeDictList" :key="item.id" :label="item.name" :value="item.name">{{ item.name }}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <div>
              <span class="color-danger text-bold">注：</span>
              请确认填写信息准确无误。您所填写地址、邮箱、手机号视为案件办理期间的有效送达联系方式。相关文书、材料、信息等到达您提供的送达方式，即视为已送达。
            </div>
          </el-form-item>
        </template>

        <el-form-item label="是否授权" prop="auth">
          <el-checkbox v-model="form.auth">是</el-checkbox>
          <span v-if="cmsUserInfo.userType === 1">
            （
            <span class="color-danger text-bold">注：</span>
            若您代表企业进行投诉，且联系人非法定代表人，请选择是。）
          </span>
          <span v-if="cmsUserInfo.userType === 2">
            （
            <span class="color-danger text-bold">注：</span>
            若您填写联系人非企业法定代表人，请选择是。）
          </span>
        </el-form-item>
        <template v-if="form.auth">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="委托人" prop="mandator">
                <el-input v-model="form.mandator" placeholder="请填写委托人姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="mandatorPhone" label-width="190px">
                <el-input v-model="form.mandatorPhone" placeholder="请填写委托人联系电话"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="身份证" prop="clientIdCardList">
            <upload-input :file-list="form.clientIdCardList" tipsText="委托人身份证人像面和国徽面，上传的附件大小不能超过20M" :size="20" @change="handleFileChange" limitNum="2"></upload-input>
          </el-form-item>
          <el-form-item label="授权委托书" prop="attachmentList">
            <upload-input :file-list="form.attachmentList" tipsText="请按照填报要求提供签字盖章的授权委托书资料，上传的附件大小不能超过50M，附件类型支持图片，视频，文档，压缩包等格式文件。" :size="50" @change="handleFileChange"></upload-input>
          </el-form-item>
        </template>

        <moduleHead title="投诉对象基本信息"></moduleHead>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="事发地" prop="addressId">
              <el-cascader
                ref="areaCascader"
                v-model="form.addressId"
                :props="{ children: 'subList', label: 'name', value: 'id', expandTrigger: 'hover', emitPath: false, checkStrictly: true }"
                :options="areas"
                :show-all-levels="false"
                @change="$refs.areaCascader && $refs.areaCascader.toggleDropDownVisible(false)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="投诉对象" prop="addressDepartmentCode" label-width="190px">
              <el-row>
                <el-col :span="12">
                  <el-cascader ref="areaCascader1" v-model="form.complainAddressId" :props="{ children: 'subList', label: 'name', value: 'id', expandTrigger: 'hover', emitPath: false, checkStrictly: true }" :options="areas" :show-all-levels="false" @change="onChangeAreaCascader1" />
                  <!-- $refs.areaCascader1 && $refs.areaCascader1.toggleDropDownVisible(false) -->
                </el-col>
                <el-col :span="12">
                  <el-cascader
                    :popper-class="departmentTreeLoading ? 'loading' : ''"
                    ref="departmentCascader"
                    v-model="form.addressDepartmentCode"
                    :props="{ children: 'children', label: 'name', value: 'deptCode', expandTrigger: 'hover', emitPath: false, checkStrictly: true }"
                    :options="departmentTree"
                    :show-all-levels="false"
                    @change="$refs.departmentCascader && $refs.departmentCascader.toggleDropDownVisible(false)"
                  />
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人" prop="">
              <el-input v-model="form.complaintContactName" placeholder="请填写联系人" maxlength="40"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="" label-width="190px">
              <el-input v-model="form.complaintContactMobile" placeholder="请填写联系电话" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <moduleHead title="反映问题基本信息"></moduleHead>
        <el-form-item label="主要诉求" prop="mainApply">
          <el-input v-model="form.mainApply" show-word-limit maxlength="200" :placeholder="`请填写主要诉求`" type="textarea" :autosize="{ minRows: 3 }"></el-input>
        </el-form-item>
        <el-form-item label="事实理由" prop="factReason">
          <el-input v-model="form.factReason" show-word-limit maxlength="1000" :placeholder="`请填写事实理由`" type="textarea" :autosize="{ minRows: 3 }"></el-input>
        </el-form-item>
        <el-form-item label="佐证材料" prop="supportAttachmentList">
          <upload-input :file-list="form.supportAttachmentList" @change="handleFileChange"></upload-input>
        </el-form-item>
        <el-form-item label="拖欠账款" prop="isArrear">
          <el-checkbox v-model="form.isArrear">是</el-checkbox>
        </el-form-item>
        <template v-if="form.isArrear">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="合同金额" prop="contractAmount">
                <el-input-number style="width: 200px" v-model="form.contractAmount" :controls="false" :min="0" :precision="2" :max="9999999999999999.99"></el-input-number>
                <span class="f18">&nbsp;&nbsp;万元</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="欠款金额" prop="arrearsAmount" label-width="190px">
                <el-input-number style="width: 200px" v-model="form.arrearsAmount" :controls="false" :min="0" :precision="2" :max="9999999999999999.99"></el-input-number>
                <span class="f18">&nbsp;&nbsp;万元</span>
                <!-- <div class="color-danger">2位小数，单位为：“万元”，如20.00表示20万元。</div> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="合同协议名称" prop="contractName">
                <el-input v-model="form.contractName" show-word-limit :placeholder="`请填写合同协议名称`"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="签订时间" prop="signTime" label-width="190px">
                <el-date-picker v-model="form.signTime" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
                <!-- <el-input v-model="form.signTime" show-word-limit :placeholder="`请填写签订时间`"></el-input> -->
              </el-form-item>
            </el-col>
            <!--   <el-col :span="12">
              <el-form-item label="合同/协议编号" label-width="190px">
                <el-input v-model="form.contractCode" show-word-limit :placeholder="`请填写合同/协议编号`"></el-input>
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-form-item label="主要违约条款" prop="defaultClause">
            <el-input v-model="form.defaultClause" show-word-limit maxlength="1000" :placeholder="`请填写合同协议主要违约条款`" type="textarea" :autosize="{ minRows: 3 }"></el-input>
          </el-form-item>
        </template>
      </div>
    </el-form>
    <div class="footer-btn">
      <el-button @click="handleSave" :disabled="submitting" type="primary" v-if="!$route.query.workOrderId">保 存</el-button>
      <el-button @click="handleSubmit" :disabled="submitting" type="primary">提 交</el-button>
      <el-button @click="handleGotoHome" type="primary" plain>返 回</el-button>
    </div>

    <el-dialog class="dialog-tips" title="提示" :visible.sync="dialogVisible" :show-close="false" :close-on-click-modal="false" width="640px">
      <div style="padding: 30px">提交成功</div>

      <span slot="footer" class="dialog-footer">
        <div class="split" style="margin-bottom: 30px"></div>
        <el-button type="primary" @click="$router.replace(backPath || ($route.query.workOrderId ? '/portals/my/list' : '/portals/index'))">返 回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as portalsApi from "@/api/portals";
import { dict2Array, getCitiesByArea, getCMSUserInfo, mergeLeft, postPortalsHeight, removeEmptyWithTree, downloadFile } from "@/utils/common";
import * as validators from "@/utils/validators";
import * as mixins from "@/utils/mixins";
import { txt2HTML } from "@/utils/filters";
import { workOrderComplaintObjectTypeDict, workOrderCreatorTypeDict } from "@/utils/dict";
import uploadInput from "@/components/uploadInput/uploadInput.vue";
import * as fileApi from "@/api/file";
import * as dictApi from "@/api/dict";

export default {
  name: "createStep2",
  mixins: [mixins.affirm, mixins.form],
  components: { uploadInput },
  data() {
    return {
      submitting: false,
      dialogVisible: false,
      creatorTypeArr: dict2Array(workOrderCreatorTypeDict, false, Number),
      complaintObjectTypeArr: dict2Array(workOrderComplaintObjectTypeDict),
      form: {
        createUsername: "",
        idNumber: "",
        mobile: "",
        mobileCode: "",
        email: "",
        emailCode: "",
        companyName: "测试企业22",
        socialCreditNumber: "22",
        companyContactName: "",
        companyContactIdNum: "",
        companyAddress: "",
        industryType: undefined,
        auth: false,
        mandator: "",
        mandatorPhone: "",
        addressId: "",
        addressDepartmentCode: "",
        addressDepartmentName: "",
        complaintContactName: "",
        complaintContactMobile: "",
        complainAddressId: "",
        complainAddress: "",
        mainApply: "",
        factReason: "",
        isArrear: false,
        contractName: "",
        signTime: "",
        contractCode: "",
        defaultClause: "",
        arrearsAmount: undefined,
        contractAmount: undefined,
        clientIdCardList: [],
        attachmentList: [],
        supportAttachmentList: [],
      },
      itemdetail: {},
      rules: {
        createUsername: [{ required: true, message: "请填写投诉人" }, { validator: validators.limitMax(10) }],
        idNumber: [{ required: true, message: "请填写" }],
        mobile: [{ required: true, message: "请填写联系电话" }, { validator: validators.phone() }],
        email: [{ required: true, message: "请填写" }, { validator: validators.email() }],
        mobileCode: [{ required: true, message: "请填写" }],
        emailCode: [{ required: true, message: "请填写" }],
        addressId: [{ required: true, message: "请选择" }],
        addressDepartmentCode: [{ required: true, message: "请选择" }],
        mandator: [{ required: true, message: "请填写" }],
        mandatorPhone: [{ required: true, message: "请填写" }, { validator: validators.phone() }],
        clientIdCardList: [{ required: true, message: "请上传委托人身份证" }, { validator: (rule, value, callback) => (value.length ? callback() : callback(new Error("请上传委托人身份证"))) }],
        attachmentList: [{ required: true, message: "请上传授权委托书" }, { validator: (rule, value, callback) => (value.length ? callback() : callback(new Error("请上传授权委托书"))) }],
        complaintContactName: [{ required: true, message: "请填写" }],
        complaintContactMobile: [{ required: true, message: "请填写联系电话" }, { validator: validators.phone() }],
        mainApply: [{ required: true, message: "请填写" }],
        factReason: [{ required: true, message: "请填写" }],
        contractName: [{ required: true, message: "请填写" }],
        signTime: [{ required: true, message: "请选择" }],
        contractCode: [{ required: true, message: "请填写" }],
        defaultClause: [{ required: true, message: "请选择" }],
        arrearsAmount: [{ required: true, message: "请填写" }],
        contractAmount: [{ required: true, message: "请填写" }],
        // supportAttachmentList: [{ required: true, message: "请上传附件" }, { validator: (rule, value, callback) => (value.length ? callback() : callback(new Error("请上传附件"))) }],
        companyAddress: [{ required: true, message: "请填写" }],
        industryType: [{ required: true, message: "请选择" }],
        companyName: [{ required: true, message: "请填写" }],
        socialCreditNumber: [{ required: true, message: "请填写" }],
      },
      areas: [],
      city: [],
      itemDetailId: "",
      departmentTree: [],
      departmentTreeLoading: false,
      backPath: "",
      flag: 1,
      cmsUserInfo: {},
      previewDialog: {
        fileURL: "",
        visible: false,
      },
      loading: true,
      industryTypeDictList: [],
    };
  },
  computed: {
    location() {
      return window.location || {};
    },
  },
  watch: {},
  created() {
    const { workOrderId, id } = this.$route.query;
    console.log(workOrderId);
    this.cmsUserInfo = getCMSUserInfo();
    this.backPath = window.localStorage.getItem("backPath");
    this.form.createUsername = decodeURIComponent(this.cmsUserInfo.userName);
    this.form.idNumber = this.cmsUserInfo.idNumber;
    if (workOrderId) {
      portalsApi.workOrder
        .detailsOfMyWorkOrder(this.$route.query.workOrderId, {
          idNumber: this.cmsUserInfo.idNumber,
          socialCreditNumber: this.cmsUserInfo.socialCreditNumber,
        })
        .then((res) => {
          const result = res.result;
          this.form = mergeLeft(this.form, result);
          this.form.createType = 1;
          this.form.id = result.id;
          this.form.supportAttachmentList = result.questionMainInfo && result.questionMainInfo.wordAttachmentList ? result.questionMainInfo.wordAttachmentList : [];
          this.form.attachmentList = result.complainPersonMainInfo && result.complainPersonMainInfo.attachmentList ? result.complainPersonMainInfo.attachmentList : [];
          this.form.dept = result.dept;
          this.form.title = result.title;
          this.form.itemSource = result.itemSource;

          this.form.addressId = result.addressId;
          this.form.complainAddressId = result.complainAddressId;
          this.form.addressDepartmentCode = result.addressDepartmentCode;
          this.form.itemDetailId = result.itemDetailId;
          this.form.pushDepartmentCode = result.pushDepartmentCode;
          this.form.pushDepartmentName = result.pushDepartmentName;

          if (result.complainPersonMainInfo) {
            this.form.createUsername = result.complainPersonMainInfo.createUsername;
            this.form.idNumber = result.complainPersonMainInfo.idNumber;
            this.form.mobile = result.complainPersonMainInfo.mobile;
            this.form.email = result.complainPersonMainInfo.email;
            this.form.companyName = result.complainPersonMainInfo.companyName;
            this.form.socialCreditNumber = result.complainPersonMainInfo.socialCreditNumber;
            this.form.companyContactName = result.complainPersonMainInfo.companyContactName;
            this.form.companyContactIdNum = result.complainPersonMainInfo.idNumber;
            this.form.companyAddress = result.complainPersonMainInfo.companyAddress;
            this.form.auth = JSON.parse(result.complainPersonMainInfo.auth);
            this.form.mandator = result.complainPersonMainInfo.mandator;
            this.form.mandatorPhone = result.complainPersonMainInfo.mandatorPhone;
            this.form.clientIdCardList = result.clientIdCardList || [];
          }
          if (result.complainant) {
            this.form.addressDepartmentName = result.complainant.addressDepartmentName;
            this.form.complaintContactName = result.complainant.complaintContactName;
            this.form.complaintContactMobile = result.complainant.complaintContactMobile;
          }
          if (result.questionMainInfo) {
            this.form.mainApply = result.questionMainInfo.mainApply;
            this.form.factReason = result.questionMainInfo.factReason;
            this.form.isArrear = JSON.parse(result.questionMainInfo.isArrear);
            this.form.contractName = result.questionMainInfo.govArrears.contractName;
            this.form.contractCode = result.questionMainInfo.govArrears.contractCode;
            this.form.defaultClause = result.questionMainInfo.govArrears.defaultClause;
            this.form.arrearsAmount = result.questionMainInfo.govArrears.arrearsAmount;
            this.form.contractAmount = result.questionMainInfo.govArrears.contractAmount;
            this.form.signTime = result.questionMainInfo.govArrears.signTime;
          }
          this.pageStatus(false);
          this.itemDetailId = result.itemDetailId;
          this.getDepartment(this.form.complainAddressId);
        });
    } else {
      this.itemDetailId = id;
      this.fetchTemporaryStorage();
    }
    this.getArea();
    // this.getDepartment();
    this.getDictList();
  },
  methods: {
    txt2HTML,
    getDictList() {
      dictApi
        .list({ parentCode: "1007" })
        .then((res) => {
          this.industryTypeDictList = res.result;
        })
        .finally(() => {});
    },
    sendCode(val) {
      return portalsApi.workOrder
        .sendSmscode({ userId: this.cmsUserInfo.userId, telephone: val, userName: decodeURIComponent(this.cmsUserInfo.userName) })
        .then((res) => {
          const result = res.result;
          if (result) {
          }
        })
        .finally(() => {});
    },
    sendEmail(val) {
      return portalsApi.workOrder
        .sendMailcode({ userId: this.cmsUserInfo.userId, mail: val, userName: decodeURIComponent(this.cmsUserInfo.userName) })
        .then((res) => {
          const result = res.result;
          if (result) {
          }
        })
        .finally(() => {});
    },
    fetchTemporaryStorage() {
      this.pageStatus(true);
      return portalsApi.workOrder
        .getTemporaryStorage({ createUserId: this.cmsUserInfo.userId })
        .then((res) => {
          const result = res.result;
          if (result) {
            this.flag = 2;
            this.form = mergeLeft(this.form, result);
            this.form.createType = 1;
            this.form.id = result.id;
            this.form.supportAttachmentList = result.questionMainInfo ? result.questionMainInfo.wordAttachmentList : [];
            this.form.attachmentList = result.complainPersonMainInfo ? result.complainPersonMainInfo.attachmentList : [];
            this.form.dept = result.dept;
            this.form.title = result.title;
            this.form.itemSource = result.itemSource;

            this.form.addressId = result.addressId;
            this.form.complainAddressId = result.complainAddressId;
            this.form.addressDepartmentCode = result.addressDepartmentCode;
            this.form.itemDetailId = result.itemDetailId;
            this.form.pushDepartmentCode = result.pushDepartmentCode;
            this.form.pushDepartmentName = result.pushDepartmentName;

            if (result.complainPersonMainInfo) {
              this.form.createUsername = result.complainPersonMainInfo.createUsername;
              this.form.idNumber = result.complainPersonMainInfo.idNumber;
              this.form.mobile = result.complainPersonMainInfo.mobile;
              this.form.email = result.complainPersonMainInfo.email;
              this.form.companyName = result.complainPersonMainInfo.companyName;
              this.form.socialCreditNumber = result.complainPersonMainInfo.socialCreditNumber;
              this.form.companyContactName = result.complainPersonMainInfo.companyContactName;
              this.form.companyContactIdNum = result.complainPersonMainInfo.idNumber;
              this.form.companyAddress = result.complainPersonMainInfo.companyAddress;
              this.form.auth = JSON.parse(result.complainPersonMainInfo.auth);
              this.form.mandator = result.complainPersonMainInfo.mandator;
              this.form.mandatorPhone = result.complainPersonMainInfo.mandatorPhone;
              this.form.clientIdCardList = result.clientIdCardList || [];
            }
            if (result.complainant) {
              this.form.addressDepartmentName = result.complainant.addressDepartmentName;
              this.form.complaintContactName = result.complainant.complaintContactName;
              this.form.complaintContactMobile = result.complainant.complaintContactMobile;
            }
            if (result.questionMainInfo) {
              this.form.mainApply = result.questionMainInfo.mainApply;
              this.form.factReason = result.questionMainInfo.factReason;
              this.form.isArrear = JSON.parse(result.questionMainInfo.isArrear);
              this.form.contractName = result.questionMainInfo.govArrears.contractName;
              this.form.contractCode = result.questionMainInfo.govArrears.contractCode;
              this.form.defaultClause = result.questionMainInfo.govArrears.defaultClause;
              this.form.arrearsAmount = result.questionMainInfo.govArrears.arrearsAmount;
              this.form.contractAmount = result.questionMainInfo.govArrears.contractAmount;
              this.form.signTime = result.questionMainInfo.govArrears.signTime;
            }
            this.getDepartment(this.form.complainAddressId);
          }
        })
        .finally(() => {
          this.$nextTick(() => {
            this.flag = 1;
            this.pageStatus(false);
          });
        });
    },
    handleRemoveFile(index) {
      this.form.supportAttachmentList.splice(index, 1);
    },
    handleRemoveFile2(index) {
      this.form.attachmentList.splice(index, 1);
    },
    handleAddressAreaChange() {
      this.city = getCitiesByArea(this.area, this.form.addressArea);
      this.form.addressCity = "";
    },
    getArea() {
      portalsApi.workOrder.area().then((res) => {
        this.areas = [res.result];
      });
    },
    onChangeAreaCascader1(e) {
      // console.log(e);
      this.form.addressDepartmentCode = "";
      this.getDepartment(e);
      this.$refs.areaCascader1 && this.$refs.areaCascader1.toggleDropDownVisible(false);
    },
    getDepartment(addressId) {
      portalsApi.workOrder
        .departByAddress({ addressId: addressId })
        .then((r) => {
          let data = JSON.parse(JSON.stringify(r.result)) || [];
          removeEmptyWithTree(data);
          const arr = data.filter((item) => {
            return item && item.id;
          });
          this.departmentTree = arr;
        })
        .finally(() => (this.departmentTreeLoading = false));
    },
    generateFormData() {
      const form = { ...this.form };
      // form.itemDetailId = this.$route.query.id;
      form.createUserId = this.cmsUserInfo.userId;
      form.createUserName = decodeURIComponent(this.cmsUserInfo.userName);
      form.createUserType = this.cmsUserInfo.userType;
      // form.email = cmsUserInfo.cmsUserEmail;
      // form.idNumber = cmsUserInfo.idNumber;
      // form.socialCreditNumber = cmsUserInfo.socialCreditNumber;

      const areaCascaderSelected = this.$refs.areaCascader.getCheckedNodes(false)[0];
      if (areaCascaderSelected) {
        form.address = areaCascaderSelected.data.name;
      }

      const areaCascaderSelected1 = this.$refs.areaCascader1.getCheckedNodes(false)[0];
      if (areaCascaderSelected1) {
        form.complainAddress = areaCascaderSelected1.data.name;
      }

      const departmentCascaderSelected = this.$refs.departmentCascader.getCheckedNodes(false)[0];
      if (departmentCascaderSelected) {
        form.addressDepartmentName = departmentCascaderSelected.data.name;
      }

      const workOrderId = this.$route.query.workOrderId;
      if (workOrderId) form.workOrderId = workOrderId;

      return form;
    },

    handleSave() {
      const form = this.generateFormData();
      this.pageStatus(true);
      portalsApi.workOrder
        .temporaryStorage(form)
        .then((res) => {
          this.form.id = res.result;
          this.$message.success("保存成功");
        })
        .finally(() => {
          this.pageStatus(false);
        });
    },

    handleSubmit() {
      this.validate("form")
        .then(() => this.confirm("请您核实填写信息是否准确，点击“确认”将无法修改信息内容，是否确认提交？"))
        .then(() => {
          const form = this.generateFormData();
          this.pageStatus(true);
          return portalsApi.workOrder[this.$route.query.workOrderId ? "resubmit" : "add"](form);
        })
        .then((res) => {
          this.resetFields("form");
          this.dialogVisible = true;
        })
        .finally(() => {
          setTimeout(() => {
            this.pageStatus(false);
          }, 100);
        });
    },
    handleGotoHome() {
      this.$confirm("确认返回吗？您所编辑的信息将不会被保存").then(() => {
        this.$route.query.workOrderId ? this.$router.back() : this.$router.push(this.backPath || "/portals/index");
      });
    },
    handleFileChange() {
      this.$nextTick(postPortalsHeight);
    },
    pageStatus(boolean) {
      this.submitting = boolean;
      this.loading = boolean;
    },
    onDownloadFile() {
      fileApi.download({
        downloadFileName: "投诉举报书模板",
        filePath: "group1/M00/00/00/rBExJWbiVouAMityAABIAPGeChA903.doc",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.key-value {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  & > div {
    line-height: 20px;
    font-size: 17px;
    flex: 1;
  }
}
.page-title {
  font-size: 24px;
  text-align: center;
  // letter-spacing: 2px;
  // font-weight: 600;
  color: #fff;
  background: #2b65da;
  height: 60px;
  align-content: center;
  margin-bottom: 20px;
}
.explain {
  border-radius: 2px;
  border: 1px solid #ccc;
  color: #8c8c8c;
  padding: 15px;
  white-space: pre-wrap;
  word-break: break-all;
  background: #f3f5f9;
  .tit {
    color: #333;
    font-weight: 600;
    font-size: 20px;
    white-space: normal;
  }
  & > .cont {
    text-indent: 20px;
    p {
      // display: flex;
      line-height: 1.6;
      white-space: normal;
      font-size: 18px;
      color: #555;
    }
  }
  .moban {
    color: @color-primary;
    // text-decoration: underline;
    white-space: normal;
    cursor: pointer;
    border: 1px solid @color-primary;
    border-radius: 2px;
    padding: 0 5px;
    font-weight: 600;
  }
}
.input-btn {
  /deep/.el-form-item__content {
    display: flex;
    align-items: center;
    .el-input {
      margin-right: 10px;
      flex: 1;
      display: block;
      width: auto;
    }
  }
}
.el-cascader,
.el-select {
  width: 100%;
}
.input-text {
  width: 100%;
  height: 110px;
}
/deep/.el-form-item__label,
/deep/.el-checkbox__label {
  font-size: 18px;
}
.footer-btn {
  margin-top: 0px;
}
.send-sms {
  display: inline-block;
  font-weight: 600;
  font-size: 16px;
}
</style>
